<template>
    <div class="agebox">
        <Tabbar :titlename="'饼图比例'" />
        <div class="agechartcs" ref="agechart"> </div>
    </div>
</template>
<script setup>
import Tabbar from '@/components/tabbar/tabbar.vue'
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
let agechart = ref()
onMounted(() => {
    let myChartsage = echarts.init(agechart.value);
    // 设置实例的配置项
    myChartsage.setOption({
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: 40,
            right: 20,
            orient: 'vertical'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ]
            }
        ]
    })
})
</script>
<style scoped lang="scss">
.agebox {
    background: url('@/assets/image/screen/agecb.png') no-repeat;
    background-size: 100% 100%;
    height: 100%;
    width: 100%;

    .sextitle {
        height: 60px;
        margin-bottom: 20px;

        p {
            margin-top: 10px;
            width: 68px;
            height: 7px;
            background: url('@/assets/image/screen/dataScreen-title.png') no-repeat;
            background-size: 100% 100%;
        }

        span {
            color: white;
        }
    }

    .agechartcs {
        width: 100%;
        height: 200px;
    }
}
</style>